<template>
	<view class="container">
		<view class="empty" v-if="list.length < 1">
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无设备</view>
			<button type="primary" @click="bindLock">关联房间锁</button>
		</view>
		<view class="list">
			<view class="box" hover-class="hoverClass" v-for="item in list" :key="item.lock_id" @click="unbindLock(item)">
				<view class="info">
					<view class="name">
						{{ item.lock_alias }}
					</view>
					<view class="status">电量：{{ item.electric_quantity }}%</view>
				</view>
				<uni-icons type="minus" size="20" color="#e43d33"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			id: null,
			group_id: null,
			tt_group_id: null,
			group: [],
			list: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.group_id = e.group;
	},
	onShow() {
		this.getGroup();
	},
	onPullDownRefresh() {
		this.getList();
	},
	methods: {
		bindLock() {
			uni.navigateTo({
				url: '/pageA/lock/linkLock?id=' + this.id + '&group=' + this.tt_group_id
			});
		},
		unbindLock(item) {
			uni.showModal({
				title: '提示',
				content: '确认解除绑定？',
				success: function (res) {
					if (res.confirm) {
						api.lockUnbind({ lock_id: item.lock_id }).then((res) => {
							if (res.data.is_success) {
								uni.hideLoading();
								uni.showToast({
									title: '解绑成功'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				this.group = data.data;
				for (let i = 0; i < this.group.length; i++) {
					if (this.group_id == this.group[i].id) {
						this.tt_group_id = this.group[i].tt_group_id;
						this.getList();
					}
				}
			});
		},
		getList() {
			let data = {
				group_id: this.tt_group_id,
				room_id: this.id
			};
			api.lockList(data).then((res) => {
				this.list = res.data.items;
				uni.stopPullDownRefresh();
			});
		}
	}
};
</script>

<style lang="scss">
.empty {
	.emptyWord {
		margin-bottom: 100rpx;
	}
}
.list {
	padding: 20rpx;
	.box {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.info {
			.name {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.status {
				font-size: 26rpx;
				color: $uni-base-color;
			}
		}
	}
}
</style>
